<template>
  <div class="field-action-list">
    <a-table size="middle" :pagination="false" :columns="columns" :dataSource="fieldActions">
      <template slot="fieldTitle" slot-scope="text, record, index">
        <div style="padding-left: 20px;">
          {{ getFieldLabel(record) }}
        </div>
      </template>
      <template slot="fieldTitleSlot" slot-scope="text, record, index">
        <div style="padding-left: 20px;">
          字段标题
        </div>
      </template>
      <template slot="browseTitle" slot-scope="text, record, index">
        <a-button shape="round" size="small" @click="() => setAllAuth('browse')">浏览</a-button>
      </template>
      <template slot="editTitle" slot-scope="text, record, index">
        <a-button shape="round" size="small" @click="() => setAllAuth('edit')">编辑</a-button>
      </template>
      <template slot="hideTitle" slot-scope="text, record, index">
        <a-button shape="round" size="small" @click="() => setAllAuth('hide')">隐藏</a-button>
      </template>
      <template slot="requiredTitle" slot-scope="text, record, index">
        <a-button shape="round" size="small" @click="() => setAllRequired('required')">必填</a-button>
      </template>

      <template slot="browse" slot-scope="text, record, index">
        <a-radio :checked="record.auth === 'browse'" @click="() => setAuth(record, 'browse')"/>
      </template>
      <template slot="edit" slot-scope="text, record, index">
        <a-radio :checked="record.auth === 'edit'" @click="() => setAuth(record, 'edit')"/>
      </template>
      <template slot="hide" slot-scope="text, record, index">
        <a-radio :checked="record.auth === 'hide'" @click="() => setAuth(record, 'hide')"/>
      </template>

      <template slot="required" slot-scope="text, record, index">
        <a-checkbox :disabled="record.auth !== 'edit'" :checked="record.required"
                    @click="() => record.required = !record.required"/>
      </template>
      <template slot="initValue" slot-scope="text, record, index">
        <DefaultValueInput
          :title="record.defaultTitle"
          :value="record.defaultValue"
          :defaultValueType="record.defaultValueType"
          @update:title="t => record.defaultTitle = t"
          @update:value="v => record.defaultValue = v"
          @update:defaultValueType="d => record.defaultValueType = d"
          :field-config="getFieldConfigById(record.fieldId, formDefinition)"/>
      </template>

      <template slot="conditionSlot" slot-scope="text, record, index">
        <div class="condition-icon-container">
          [<a @click="() => openConditonConfigModal(record)">条件</a>]
          <div v-show="showConditionIcon(record, formDefinition && formDefinition.fieldActionFormulaGroups || [])"
               class="condition-icon"><span class="iconfont">&#xe806;</span></div>
        </div>
      </template>
    </a-table>

    <FieldActionFormulaModal ref="FieldActionFormulaModal" @ok="fieldActionFormulaModalOK" :form-definition="formDefinition"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {getFieldConfigById, getSubFormByFieldId, isMainField} from '@/utils/FormDesignUtils';
import FormField from '@/components/hhd/design/FormField/FormField.vue';
import {AuthType} from '@/components/hhd/design/Constants';
import FieldDefaultValueSetter from '@/components/hhd/design/FormAction/FieldDefaultValueSetter.vue';
import DefaultValueInput from '@/components/hhd/design/FormAction/DefaultValueInput.vue';
import FieldActionFormulaModal from '@comp/hhd/design/FormAction/FieldActionFormulaModal.vue';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'FieldActionList',
  components: {FieldActionFormulaModal, DefaultValueInput, FieldDefaultValueSetter, FormField},
  props: {
    fieldActions: createProps(Array),
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      AuthType,
      columns
    };
  },
  methods: {
    getFieldConfigById,
    setAuth(r, auth) {
      r.auth = auth;
      if (auth !== 'edit') {
        r.required = false;
      }
    },
    setAllAuth(auth) {
      (this.fieldActions || []).forEach(r => this.setAuth(r, auth));
    },
    setAllRequired() {
      let allRequired = true;
      (this.fieldActions || []).forEach(r => {
        if (r.auth === 'edit' && !r.required) {
          allRequired = false;
        }
      });
      (this.fieldActions || []).forEach(r => {
        if (r.auth === 'edit') r.required = !allRequired;
      });
    },
    showConditionIcon(fieldAction, fieldActionFormulaGroups) {
      let fieldId = fieldAction && fieldAction.fieldId || undefined;
      fieldActionFormulaGroups = fieldActionFormulaGroups || [];
      let list = fieldActionFormulaGroups.filter(f => f.fieldId === fieldId && f.actionId === fieldAction.actionId);
      return list && list.length;
    },
    openConditonConfigModal(record) {
      let label = this.getFieldLabel(record);
      if (!this.formDefinition.fieldActionFormulaGroups) {
        this.formDefinition.fieldActionFormulaGroups = [];
      }
      let formuls = this.formDefinition.fieldActionFormulaGroups.filter(f => f.fieldId === record.fieldId && f.actionId === record.actionId);
      this.editingFieldFormulaActionId = record.actionId
      this.$refs.FieldActionFormulaModal.setData(formuls, record, label);
    },
    fieldActionFormulaModalOK({fieldId, fieldFormulas}) {
      let list = this.formDefinition.fieldActionFormulaGroups.filter(formula => {
        if (formula.fieldId !== fieldId && this.editingFieldFormulaActionId === formula.actionId)
          return false
        return true;
      });
      fieldFormulas && list.push(...fieldFormulas);
      this.formDefinition.fieldActionFormulaGroups = list;
      this.fieldActions.splice(0, 0);
    },
    getFieldLabel(fieldAction) {
      let field = getFieldConfigById(fieldAction.fieldId, this.formDefinition);
      if (field) {
        let subForm = getSubFormByFieldId(fieldAction.fieldId, this.formDefinition);
        return `[${isMainField(field.id, this.formDefinition) ? '主表' : (subForm && subForm.formName)}] ${field.label}`;
      }
      return '';
    }
  }
};

const columns = [
  {
    scopedSlots: {
      customRender: 'fieldTitle',
      title: 'fieldTitleSlot'
    }
  },
  {
    scopedSlots: {
      customRender: 'browse',
      title: 'browseTitle'
    },
    align: 'center'
  },
  {
    scopedSlots: {
      title: 'editTitle',
      customRender: 'edit'
    },
    align: 'center'
  },
  {
    scopedSlots: {
      title: 'hideTitle',
      customRender: 'hide'
    },
    align: 'center'
  },
  {
    scopedSlots: {
      title: 'requiredTitle',
      customRender: 'required'
    },
    align: 'center'
  },
  {
    title: '初始值设置',
    scopedSlots: {
      customRender: 'initValue'
    },
    align: 'center'
  },
  {
    title: ' ',
    scopedSlots: {
      customRender: 'conditionSlot'
    },
    align: 'center'
  }
];
</script>
<style>
.field-action-list {
  border-top: 1px solid #e2e4e9;
}

.condition-icon-container {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 10px;
  user-select: none;
}

.condition-icon .iconfont {
  font-size: 12px;
}

.condition-icon {
  padding-top: 2px;
  display: inline-flex;
  width: 15px;
  height: 15px;
  font-size: 12px !important;
  border-radius: 15px;
  background: #41c400;
  color: white !important;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
</style>